import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router";
import { createStore } from "./store";
import { sync } from "vuex-router-sync";
import "@/styles/index.scss"; // 全局的 css
import * as date from "./utils/date";
import "./icons"; // icon
// 图片预览
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import {
  Card,
  Pagination,
  Form,
  FormItem,
  Select,
  Input,
  Button,
  Option,
  Tooltip,
  Carousel,
  CarouselItem,
  Dialog,
  Dropdown,
  DropdownMenu,
  Upload,
  DropdownItem,
  Table,
  TableColumn
} from "element-ui";
import MessageBox from "@/components/MessageBox/lib";
import "highlight.js/styles/github-gist.css"; // https://highlightjs.org/static/demo/
import hljs from "highlight.js"; // 引入JS
import echarts from "echarts";

// 日历组件只能在客户端渲染
if (!Vue.prototype.$isServer) {
  const Calendar = require("v-calendar/lib/components/calendar.umd");
  const { mavonEditor } = require("mavon-editor");
  require("echarts/theme/macarons");
  Vue.component("calendar", Calendar);
  Vue.component("mavonEditor", mavonEditor);
}
Vue.component("el-card", Card);
Vue.component("el-form", Form);
Vue.component("el-form-item", FormItem);
Vue.component("el-select", Select);
Vue.component("el-input", Input);
Vue.component("el-button", Button);
Vue.component("el-option", Option);
Vue.component("el-pagination", Pagination);
Vue.component("el-tooltip", Tooltip);
Vue.component("el-carousel", Carousel);
Vue.component("el-carousel-item", CarouselItem);
Vue.component("el-dialog", Dialog);
Vue.component("el-dropdown", Dropdown);
Vue.component("el-dropdown-menu", DropdownMenu);
Vue.component("el-dropdown-item", DropdownItem);
Vue.component("el-upload", Upload);
Vue.component("el-table", Table);
Vue.component("el-table-column", TableColumn);

Vue.prototype.$message = MessageBox;
Vue.prototype.$date = date;
Vue.prototype.$echarts = echarts;
Vue.prototype.$ELEMENT = { size: "small", zIndex: 3000 };

Vue.use(Viewer, {
  // [默认的配置项](https://github.com/fengyuanchen/viewerjs)
  defaultOptions: {
    navbar: true, // 显示导航栏
    toolbar: true, // 显示工具栏
    movable: true // 可移动
  }
});
Vue.mixin({
  beforeMount() {
    // 客户端获取 store 数据，如果不写这，会造成客户端和服务端数据不统一的情况
    const { asyncData } = this.$options;
    if (asyncData) {
      // 将获取数据操作分配给 promise
      // 以便在组件中，我们可以在数据准备就绪后
      // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
      this.dataPromise = asyncData({
        store: this.$store,
        route: this.$route
      });
    }
  },
  // 当路由组件重用（同一路由，但是 params 或 query 已更改，例如，从 user/1 到 user/2）时，也应该调用 asyncData 函数
  beforeRouteUpdate(to, from, next) {
    const { asyncData } = this.$options;
    if (asyncData) {
      asyncData({
        store: this.$store,
        route: to
      })
        .then(next)
        .catch(next);
    } else {
      next();
    }
  }
});
Vue.directive("highlight", el => {
  const blocks = el.querySelectorAll("pre");
  blocks.forEach(hljs.highlightBlock);
});
// 导出一个工厂函数，用于创建新的
// 应用程序、router 和 store 实例
export function createApp() {
  const router = createRouter();
  const store = createStore();
  sync(store, router);
  const app = new Vue({
    router,
    store,
    // 根实例简单的渲染应用程序组件。
    render: h => h(App)
  });
  return { router, app, store };
}
